<template>
	<view class="drop-item">
		<!-- 多选渲染 -->
		<block v-if="type=='filter'">
			<scroll-view class="menu-box" :scroll-y="true">
				<view class="box" v-for="pItem in newItem[childName]" :key="pItem.drop_item_key">
					<template v-if="pItem.type === 'filter'">
						<slot name="filterItem" :item="newItem[childName]"></slot>
					</template>
					<template v-else>
						<view class="title">{{pItem[fileds]}}</view>
						<view class="labels">
							<view v-for="cItem in pItem[childName]" :key="cItem.drop_item_key"
								@click="selectFilterLabel(cItem,cItem.drop_item_key)"
								:class="{'on':filter.findIndex(el=>el==cItem.drop_item_key)!==-1}">
								{{cItem[fileds]}}
							</view>
						</view>
					</template>
				</view>
			</scroll-view>
		</block>
		
		<!-- 区间单选 -->
		<block v-else-if="type=='radio'">
			<scroll-view class="menu-box" :scroll-y="true">
				<view class="box" v-for="pItem in newItem[childName]" :key="pItem.drop_item_key">	
					<view class="title">{{pItem[fileds]}}</view>
					<view class="labels">
						<template v-for="cItem in pItem[childName]" :key="cItem.drop_item_key">
							<template v-if="cItem.$component === 'numberRange'">
								<view
									@tap="selectNumberRangeLabel(cItem,pItem.drop_item_key)"
									:class="{'on':radio.findIndex(el=>el.drop_item_key==cItem.drop_item_key)!==-1}"
									:cIndex="cItem.drop_item_key">
									{{cItem[fileds]}}
								</view>
								<view v-if="showNumberRange" class="range-container">
									<input
										type="digit"
										v-model="cItem.minValue"
										placeholder="最小值"
										@blur="inputBlur(cItem)"
										style="text-align: center;border-bottom: 1px solid #adadad;"
									/>
									<view style="margin: 0 20rpx;">至</view>
									<input
										type="digit"
										v-model="cItem.maxValue"
										placeholder="最大值"
										@blur="inputBlur(cItem)"
										style="text-align: center;border-bottom: 1px solid #adadad;"
									/>
								</view>
							</template>
							<view
								v-else
								@tap="selectRadioLabel(cItem,pItem.drop_item_key)"
								:class="{'on':radio.findIndex(el=>el.drop_item_key==cItem.drop_item_key)!==-1}"
								:key="cItem.drop_item_key">
								{{cItem[fileds]}}
							</view>
						</template>
					</view>
				</view>
			</scroll-view>
		</block>
	</view>
</template>

<script>
	import {
		guid
	} from '../../lib/guid.js'
	import { ref, unref } from 'vue'
	
	export default {
		/**
		 * @property {Object}						item			当前项
		 * @property {String}						fileds  		显示的字段（默认 name）
		 * @property {String}						childName  		子菜单字段（默认 submenu）
		 * @property {String}						type  			类型	（默认 filter，可选项 radio）
		 * */

		props: {
			item: {
				type: Object,
				default () {
					return {}
				}
			},
			fileds: {
				type: String,
				default: "name"
			},
			childName: {
				type: String,
				default: 'submenu'
			},
			type: {
				type: String,
				default: 'filter'
			},
		},
		emits: ['change'],
		setup (props, {emit}) {
			const filter = ref([])
			const radio = ref([])
			const newItem = ref({})
			
			// 多选选中数组
			const selectFilterArr = ref([])
			
			// 单选选中数组
			const selectRadioArr = ref([])
			
			
			const showNumberRange = ref(false)
			function init() {
				newItem.value = unref(props.item || {})
				newItem.value.drop_item_key = guid()
				setKey(unref(newItem))
			}
			function setKey(item, pKey = '') {
				let child = item[props.childName]
				if (child && child.length) {
					child.forEach(el => {
						el.drop_item_key = guid()
						el.checked = el.checked ? el.checked : false
						el.parent_type = props.type
						if (el.checked) {
							if (el.parent_type === 'filter') {
								selectFilterArr.value.push(el)
								filter.value.push(el.drop_item_key)
							} else if (el.parent_type === 'radio') {
								selectRadioLabel(el, pKey)
							}
						}
						setKey(el, el.drop_item_key)
					})
				} else {
					item[props.childName] = []
				}
			}

			// 多选
			function selectFilterLabel(item, key) {
				// 已选中，已选中 ? 移除选中 : 添加选中
				const sIdx = unref(selectFilterArr).findIndex(el => el.drop_item_key == key)
				if (sIdx >= 0) {
					item.checked = false
					selectFilterArr.value.splice(sIdx, 1)
				} else {
					item.checked = true
					selectFilterArr.value.push(item)
				}

				// 已选中，已选中 ? 移除选中的 key : 添加选中的 key
				const fIdx = filter.value.findIndex(el => el == key)
				if (sIdx >= 0) filter.value.splice(fIdx, 1)
				else filter.value.push(key)

				emit('change', unref(selectFilterArr))
			}
			
			function selectNumberRangeLabel(item, key) {
				selectDefaultLabel(item, key)
				showNumberRange.value = true
			}
			function selectRadioLabel(item, key) {
				selectDefaultLabel(item, key)
				showNumberRange.value = false
			}
			// 单选
			function selectDefaultLabel(item, key) {
				// 已选中 ? 移除选中 : 添加选中
				const sIdx = unref(selectRadioArr).findIndex(el => el.pKey == key)
				
				if (sIdx >= 0 && selectRadioArr.value[sIdx].drop_item_key === item.drop_item_key) {
					selectRadioArr.value.splice(sIdx, 1)
					item.checked = false
				} else if (sIdx >= 0 && selectRadioArr.value[sIdx].drop_item_key !== item.drop_item_key) {
					selectRadioArr.value[sIdx].checked = false
					item.checked = true
					selectRadioArr.value.splice(sIdx, 1, {
						pKey: key,
						...item
					})
				} else {
					item.checked = true
					selectRadioArr.value.push({
						pKey: key,
						...item
					})
				}


				// 选中之前判断是否已经选中，已选中 ? radio = -1 : radio = key
				const fIdx = unref(radio).findIndex(el => el.pKey == key)
				if (fIdx >= 0 && radio.value[fIdx].drop_item_key === item.drop_item_key) {
					radio.value.splice(fIdx, 1)
				} else if (fIdx >= 0 && radio.value[fIdx].drop_item_key !== item.drop_item_key) {
					radio.value.splice(fIdx, 1, {
						pKey: key,
						drop_item_key: item.drop_item_key
					})
				} else {
					radio.value.push({
						pKey: key,
						drop_item_key: item.drop_item_key
					})
				}
				
				emit('change', unref(selectRadioArr))
			}
			
			function inputBlur(item) {
				this.selectRadioArr && this.selectRadioArr.some(it => {
					const bool = it.drop_item_key = item.drop_item_key
					if (bool) {
						it = Object.assign(it, item)
					}
					return bool
				})
			}
			init()
			
			return {
				newItem,
				selectFilterLabel,
				selectRadioLabel,
				selectNumberRangeLabel,
				filter,
				radio,
				showNumberRange,
				selectFilterArr,
				selectRadioArr,
				inputBlur,
			}
		}
	}
</script>

<style lang="scss" scoped>
	view {
		display: flex;
		flex-wrap: nowrap;
	}

	.drop-item {
		width: 100%;
		align-items: center;
		flex-direction: column;

		.title {
			width: 100%;
			font-size: 26rpx;
			color: #888;
		}

		.labels {
			flex-direction: row;
			flex-wrap: wrap;
			padding-bottom: 1rpx;
			.on {
				border-color: $uni-color-primary;
				background-color: $uni-color-primary;
				color: #fff;
			}

			>view {
				// width: calc((734rpx - 30rpx * 3) / 4 - 1rpx * 2);
				width: 22.6%;
				height: 60rpx;
				border: solid 1rpx #adadad;
				border-radius: 4rpx;
				margin-right: 12rpx;
				margin-top: 16rpx;
				font-size: 24rpx;
				flex-direction: row;
				justify-content: center;
				align-items: center;
			}
			.range-container {
				width: 100%;
				box-sizing: border-box;
				border: none;
				padding-top: 20rpx;
			}
		}

		.menu-box {
			width: 698rpx;
			height: calc(690rpx - 120rpx);
			flex-shrink: 1;

			.box {
				width: 100%;
				padding-top: 32rpx;
				flex-direction: column;
			}
		}
	}
</style>
